<div class="mar-bottom-xl" ng-if="$ctrl.showBindings">
  <h3>Bindings</h3>
  <service-binding
    ng-repeat="binding in $ctrl.bindings track by (binding | uid)"
    namespace="$ctrl.projectContext.projectName"
    binding="binding"
    ref-api-object="$ctrl.apiObject"
    service-classes="$ctrl.serviceClasses"
    service-instances="$ctrl.serviceInstances">
  </service-binding>
  <div ng-if="($ctrl.bindableServiceInstances | size) &&
              ($ctrl.serviceBindingsVersion | canI : 'create') &&
              !$ctrl.apiObject.metadata.deletionTimestamp">
    <a href="" ng-click="$ctrl.createBinding()" role="button">
      <span class="pficon pficon-add-circle-o" aria-hidden="true"></span>
      Create Binding
    </a>
  </div>
  <div ng-if="!$ctrl.apiObject.metadata.deletionTimestamp && !($ctrl.bindableServiceInstances | size)">
    <span>You must have a bindable service in your namespace in order to create bindings.</span>
    <div>
      <a ng-href="{{project | catalogURL}}">Browse Catalog</a>
    </div>
  </div>
  <div ng-if="!($ctrl.bindings | size) && ($ctrl.bindableServiceInstances | size) && !($ctrl.serviceBindingsVersion | canI : 'create')">
    <span>There are no service bindings.</span>
  </div>
</div>
<overlay-panel show-panel="$ctrl.overlayPanelVisible" handle-close="$ctrl.closeOverlayPanel">
  <bind-service target="$ctrl.apiObject"
                project="$ctrl.project"
                on-close="$ctrl.closeOverlayPanel"></bind-service>
</overlay-panel>
